// 添加
let userId = localStorage.getItem("battlenetId");
console.log(userId);

let token = localStorage.getItem("battlenetToken");
console.log(token);

let productArr = [];

// ***账户
let li3 = document.querySelector("#ul1 .li3");
let span3 = document.querySelector("#ul1 .icon-shangjiantou-copy");
let span2 = document.querySelector("#ul1 .icon-xiajiantou");
// console.log(Boolean(span3));
let triangle = document.querySelector("#triangle");
let ul2 = document.querySelector("#ul2");
let bg = document.querySelector("#bg");
let loginBtn = document.querySelector("#ul2 #loginBtn");

// ***账户
let flag = false;
li3.onclick = function () {
  if (flag) {
    span2.style.display = "block";
    span3.style.display = "none";
    flag = false;
    triangle.style.display = "none";
    ul2.style.display = "none";
    bg.style.display = "none";
  } else {
    span2.style.display = "none";
    span3.style.display = "block";
    flag = true;
    triangle.style.display = "block";
    ul2.style.display = "block";
    bg.style.display = "block";
    bg.style.zIndex = "1";
    triangle.style.zIndex = "10";
    ul2.style.zIndex = "30";
  }
};

// 点击登录按钮后跳转至登录页
loginBtn.onclick = function () {
  location.href = "login.html";
};

// ***账户遮罩层
bg.onclick = function () {
  bg.style.display = "none";
  span2.style.display = "block";
  span3.style.display = "none";
  flag = false;
  triangle.style.display = "none";
  ul2.style.display = "none";
  bg.style.display = "none";
};

// ***总览
// 总览按钮
let zonglanBtn = document.querySelector("#ul3 .li1 .span1");
// 总览箭头
let zonglanJt = document.querySelector("#ul3 .li1 .span2");
// 总览下边框
let zlXia1 = document.querySelector("#zlXia1");
let zlXia2 = document.querySelector("#zlXia2");
// 总览div
let zonglanDiv = document.querySelector("#zonglan");
let animation = true;
zonglanBtn.onclick = function () {
  if (animation) {
    zonglanJt.style.transform = "rotate(180deg)";
    zonglanJt.style.transition = "all .3s";
    zlXia1.style.width = "47px";
    zlXia1.style.transition = "all .5s";
    zlXia2.style.width = "47px";
    zlXia2.style.transform = "translateX(-44px)";
    zlXia2.style.transition = "all .5s";
    zonglanDiv.style.display = "block";

    zonglanDiv.style.transition = "all .5s";
    zonglanDiv.style.zIndex = "-1";
    animation = false;
  } else {
    zonglanJt.style.transform = "rotate(0deg)";
    zonglanJt.style.transition = "all .3s";
    zlXia1.style.width = "0px";
    zlXia1.style.transform = "translateX(0px)";
    zlXia1.style.transition = "all .5s";
    zlXia2.style.width = "0px";
    zlXia2.style.transform = "translateX(0px)";
    zlXia2.style.transition = "all .5s";
    zonglanDiv.style.display = "none";
    zonglanDiv.style.transition = "all .5s";
    animation = true;
  }
};

// ***轮播图
// 页码
let pageNum = 0;
// 获取ul8中的li
let btns = document.querySelectorAll("#ul8 li");
// ul7中的li
let items = document.querySelectorAll("#ul7 li");
// console.log(btns);
btns.forEach((btn, index) => {
  btn.onclick = () => {
    btns[pageNum].style.background = "#ccc";

    items[pageNum].style.opacity = 0;

    btn.style.background = "blue";

    items[index].style.opacity = 1;

    pageNum = index;
    // console.log(pageNum);
  };
});
// 获取翻页按钮
let rightBtn = document.querySelector("#rightBtn");
rightBtn.onclick = function () {
  btns[pageNum].style.background = "#ccc";
  items[pageNum].style.opacity = 0;
  // 下一页页码
  let nextPage = pageNum + 1;
  // console.log(nextPage);
  if (nextPage == 4) {
    nextPage = 0;
  }
  btns[nextPage].style.background = "blue";
  items[nextPage].style.opacity = 1;
  pageNum = nextPage;
};

let leftBtn = document.querySelector("#leftBtn");
console.log(leftBtn);
leftBtn.onclick = function () {
  console.log(this);
  btns[pageNum].style.background = "#ccc";
  items[pageNum].style.opacity = 0;
  // 上一页页码
  let nextPage = pageNum - 1;
  if (nextPage == -1) {
    nextPage = 3;
  }
  btns[nextPage].style.background = "blue";
  items[nextPage].style.opacity = 1;
  pageNum = nextPage;
};

// 自动播放
let timer = setInterval(() => {
  rightBtn.onclick();
}, 2000);

// 轮播图播放&暂停按钮
let kai = document.querySelector("#ul9 .li1");
let zan = document.querySelector("#ul9 .li2");

// console.log(kai);
kai.onclick = function () {
  kai.style.display = "none";
  zan.style.display = "block";
  clearInterval(timer);
  zan.onclick = function () {
    kai.style.display = "block";
    zan.style.display = "none";
    timer = setInterval(() => {
      rightBtn.onclick();
    }, 2000);
  };
};

// 注册
let signBtn = document.querySelector("#Header #ul2 .signBtn");
signBtn.onclick = function () {
  location.href = "sign.html";
};

let Top = document.querySelector("#Top");
// ***返回顶部
// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (
    document.body.scrollTop > 150 ||
    document.documentElement.scrollTop > 150
  ) {
    document.getElementById("Top").style.display = "block";
  } else {
    document.getElementById("Top").style.display = "none";
  }
}

// 点击按钮，返回顶部
Top.onclick = function () {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
};

// 添加商品框
// let sendDiv = document.querySelector("#send");
// let sendIpts = document.querySelectorAll("#send input");

// // 添加商品按钮
// let addDiv = document.querySelector("#addBtn");
// addDiv.onclick = function () {
//   if (animation) {
//     sendDiv.style.display = "block";
//     animation = false;
//   } else {
//     sendDiv.style.display = "none";
//     animation = true;
//   }
// };

// sendIpts[4].onclick = function () {
//   console.log(4);
//   let pimg = sendIpts[0].value;
//   let pname = sendIpts[1].value;
//   let pdesc = sendIpts[2].value;
//   let pprice = sendIpts[3].value;
//   let url = "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
//   axios
//     .get(url, {
//       params: {
//         pname,
//         pprice,
//         pimg,
//         pdesc,
//         uid: userId,
//       },
//     })
//     .then((r) => {
//       // 发布成功后渲染列表
//       loadList();
//       console.log(r.data);
//       alert(r.data.msg);
//       sendDiv.style.display = "none";
//     });
// };

// // 添加

// // 一开始就需要渲染列表
// loadList();
// // 封装商品列表
// function loadList() {
//   let pagenum = 0;
//   let pagesize = 50;
//   let listAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
//   axios
//     .get(listAPI, {
//       params: {
//         pagenum,
//         pagesize,
//         uid: userId,
//       },
//     })
//     .then((r) => {
//       console.log(r.data);

//       productArr = r.data.data;

//       // 把r.data数组中的一个一个的对象映射成一个一个的字符串
//       let liArr = r.data.data.map(
//         (v) => `
//               <a href="details.html?pid=${v.pid}" style="text-decoration:none">
//               <li><img src="${v.pimg}" alt="" /></li>
//               <li><img src="../images/01.jpg" alt=""><span>${v.pname}</span></li>
//               <li>${v.pdesc}</li>
//               <li></li>
//               <li></li>
//               <li>￥ ${v.pprice} 起</li>
//               </a>
//               `
//       );
//       // 将拼接好的li给到ul
//       document.querySelector(".ul1").innerHTML = liArr.join("");
//     });
// }

// 去购物车
let goCart = document.querySelector("#ul3 .li3");
goCart.onclick = function () {
  location.href = "shopping cart.html";
};
